import React, {useEffect, useRef, useState} from 'react';
import classes from './index.module.scss'
import {Avatar, Button, Card, Divider, message, Menu, Popconfirm, Skeleton} from "antd";
import {
    ClockCircleTwoTone,
    FireTwoTone,
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
    UserOutlined,
    HeartTwoTone
} from '@ant-design/icons';
import {useNavigate} from "react-router-dom";
import Meta from "antd/es/card/Meta";
import {useSelector} from "react-redux";
import {ReactEmojiEditor} from "react-emotor";
import {getToken} from "../../../utils/token";
import {reqGetExpList, reqPublishExp} from "../../../api/frontDesk/community";


function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}

const items = [
    getItem(
        '',
        'group',
        null,
        [
            getItem('全部', '1', <ClockCircleTwoTone/>),
        ],
        'group')
];


const Community = () => {

    const nav = useNavigate()

    const emotor = useRef();

    const [loading, setLoading] = useState(true);
    const [content, setContent] = useState(true);

    const [list, setList] = useState([])

    const {persistedReducer} = useSelector(state => state)
    const {userAllInfo} = persistedReducer.user

    useEffect(() => {
        getData()
        setTimeout(() => {
            setLoading(false)
        }, 500)
    }, [])

    const getData = async () => {
        const result = await reqGetExpList()
        setList(result.data)
    }


    // 组件内容改变回调函数
    function contentOnChange(content) {
        setContent(content)
    }


    function clean() {
        emotor.current.clean();
    }

    // 组件获取焦点
    const publishComment = async () => {
        if (getToken()) {
            if (content !== '') {
                const result = await reqPublishExp({user_id: userAllInfo.id, content})
                if (result.status === 0) {
                    getData()
                    message.success('发表成功')
                    emotor.current.clean()
                }
            } else {
                message.info('请不要发表空的评论')
            }
        } else {
            message.info('请先登录')
        }
    }

    return (
        <div className={classes.Community}>
            {/*左侧菜单*/}
            <div>
                <Menu
                    style={{
                        width: 200,
                        height: 400,
                        borderRadius: 5,
                        fontsize: 18
                    }}
                    defaultSelectedKeys={['1']}
                    mode="inline"
                    items={items}
                />
            </div>
            <div style={{width: "100%"}}>
                {/*中间内容*/}
                <div className={classes.ReactEmojiEditor}>
                    <ReactEmojiEditor
                        ref={emotor}
                        id="myEmotor"
                        placeholder='请遵守互联网法律和规范进行发言,点击发表按钮即可交流'
                        onChange={content => contentOnChange(content)}
                    />
                    <div style={{padding: 15}}>
                        <Button style={{marginRight: 15}} type="primary" onClick={clean}>清空</Button>
                        <Button type="primary" onClick={publishComment}>发表</Button>
                    </div>
                </div>
                {
                    list.map((item, index) =>
                        <Card
                            key={index}
                            hoverable
                            style={{width: "95%", margin: "20px auto"}}
                        >
                            <Skeleton loading={loading} avatar active>
                                <Meta
                                    avatar={<Avatar src={item.user_avatar}/>}
                                    title={item.nickname}
                                    description={item.content}
                                />
                            </Skeleton>
                        </Card>
                    )
                }
            </div>
            <div>
                {/*右侧精选*/}
                <div className={classes.MyInfoContainer}>
                    <div className={classes.MyInfo}>
                        <Avatar src={getToken() ? userAllInfo.user_avatar : null} size={60} icon={<UserOutlined/>}/>
                        <Divider/>
                        <span>{getToken() ? userAllInfo.nickname : null}</span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Community;